<template>
  <div class="page">
    <div class="sport">
      <div class="pic"><img src="../assets/images/sport.png" alt="" /></div>
      <div class="sportsDetail">
        <ul v-for="(item, index) in list" :key="index">
          <li><img :src="item.img" alt="" @click="goDetail(item)" /></li>
          <li>
            <span @click="goDetail(item)">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import axios from "axios";
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {
      list: [
        {
          img:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2868170116,1712138027&fm=26&gp=0.jpg",
          name: "男子1000米/女子800米",
        },
        {
          img:
            "vo3dSag_xI4khGko9WTAnF6hhy/baike/g=0;w=268/sign=6f4b9a5ccb95d143ca76e12804cdb034/d1a20cf431adcbef5be50859afaf2edda2cc9f9f.jpg",
          name: "肺活量",
        },
      ],
    };
  },
  computed: mapState({
    type(state) {
      return state.app.type;
    },
  }),

  created() {
    this.exit();
  },
  methods: {
    exit() {
      axios.post("/api/user/select_gradeDetail", {}).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    goDetail(e) {
      // console.log(e);
      this.$router.push({ path: "/sportsDetail" });
      let data = e;
      localStorage.setItem("list", JSON.stringify(data));
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: calc(100% - 246px);
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  background: url(~@/assets/images/矩形1拷贝3.png) no-repeat;
  background-size: 110% 100%;
  background-position: 80% 110%;
  .sport {
    width: 100%;
    height: 100%;
    .pic {
      margin: 20px;
    }
    .sportsDetail {
      width: 100%;
      height: 80%;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      text-align: center;
      ul {
        width: 26%;
        height: 50%;
        margin: 0 2%;
        list-style: none;
        li {
          width: 100%;
          height: 70%;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        li:nth-of-type(2) {
          margin-top: 10px;
          // cursor: pointer;
          span {
            cursor: pointer;
          }
        }
        li:nth-of-type(2) > span:hover {
          color: seagreen;
          text-decoration: underline;
        }
      }
      ul:nth-of-type(1),
      ul:nth-of-type(4) {
        margin-left: 4%;
      }
    }
  }
}
</style>
